<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Local Search POC</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
      div .resultItem {font-size: 12px; padding:10px; margin-top:10px; border:1px dashed #0000FF;}
      div .resultHead {font-weight:bold; font-size:14px; padding-bottom:20px;}
      div .resultDetail {color:#555555;}
      div strong {color:#333333;}
      ul {margin-top:10px;}
      ul li span {font-weight:bold;}
    </style>
    <script>
      function Search() {
        this.uri = 'json.jsp';
        this.strKeyword = $('#txtKeyword').val();
        this.doValidate = function(){
          $('#lblMessage').empty();
          var key = this.strKeyword;
          var sign = (key && key.replace(/ /gi, '') != '');
          if (!sign) {
            $('#lblMessage').text('Please type keyword to search.');
          };
          return sign;
        };
      };
      Search.prototype.do = function() {
        if (!this.doValidate()) return;
        $.getJSON(this.uri, {keyword: this.strKeyword}, this._getJSONCallback);
      };
      Search.prototype._getJSONCallback = function(items){
        var _parseDetail = function(item) {
          var attrs = ['directlyUsedBy', 'directlyUses', 'indirectlyUsedBy', 'indirectlyUse'];
          var html = [];
          for (var i=0; i<attrs.length; i++) {
            var attrName = attrs[i], attr = item[attrName];
            html.push('<strong>' + attrName + ':</strong>');
            html.push('<ul>');
            if (attr && attr.length && (attr.length > 0)) {
              for (var j=0; j<attr.length; j++)
                html.push('<li><span>URL: </span>' + attr[j]['url'] + 
                          '<br><span>TYPE: </span>' + attr[j]['type'] + '</li>');
            } else {
              html.push('<li>[NOT FOUND]</li>');
            }
            html.push('</ul>');
          }
          return html.join('');
        };
        $('#serchResultContainer').empty();
        $.each(items, function(i,item){
          ($('<div class="resultItem"/>')
          .append($('<div class="resultHead"/>').append(item.url))
          .append($('<div class="resultDetail"/>').append(_parseDetail(item))))
          .appendTo('#serchResultContainer');
        });
      };
	</script>
  </head>

  <body>
    <br>
    <br>
    <br>
    <br>
    <center>
    <div id="lblMessage" style="width:480px;height:18px;color:#FF0000;text-align:left;"></div>
    <input type="text" id="txtKeyword" name="txtKeyword" style="width:400px;"/>
    <input type="button" value="Search" id="btnSearch" onclick="(new Search()).do();" style="width:80px;" />
    <br>
    </center>
    <div id="serchResultContainer"></div>
  </body>
</html>
